<template>
    <div id="home">
        <!-- 父子组件传值加冒号就是代表一个变量，不加就代表一个变量 -->
        <NavBar class="home-nav"><div slot="center">蘑菇街</div></NavBar>
        <TabControl :titles="['流行','新款','精选']" class="tab-control" v-show="isTabFixed" ref="tabControl1" @tabClick='tabClick'></TabControl>
        <Scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="loadMore">
            <HomeSwiper :banners='banner' @swiperImageLoad="swiperImageLoad"></HomeSwiper>
            <RecommendView :recommends='recommends'></RecommendView>
            <FeatureView></FeatureView>
            <TabControl :titles="['流行','新款','精选']" ref="tabControl2" @tabClick='tabClick'></TabControl>
            <GoodsList :goods='showGoods'></GoodsList>
        </Scroll>
        <!-- 组件不能直接监听点击事件   加个native-->
        <BackTop @click.native="backClick" v-show="isShowBackTop"></BackTop>
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import Scroll from 'components/common/scroll/Scroll'

import GoodsList from 'components/content/goods/GoodsList'
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'
import BackTop from 'components/content/backTop/BackTop.vue'

// 混入
import {itemListenerMixin,backTopMinin} from '../../common/mixin'

// 常量
import {BACKTOP_DISTANCE} from '../../common/const'

import {getMultiData,getHomeGoods} from 'network/home'
export default {
    name:'home',
    components:{
        NavBar,TabControl,Scroll,
        HomeSwiper,RecommendView,FeatureView,GoodsList,BackTop

    },
    mixins:[itemListenerMixin,backTopMinin],
    data() {
        return {
            banner:[],//轮播图数据
            recommends:[],//推荐
            goods:{//商品数据
                'pop':{page:0,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]},
            },
            currentType:'pop',//tabControl选项
            tabOffsetTop:0,//tab距离顶部的高度
            isTabFixed:false,//是否需要吸顶
            saveY:0,//离开时y的位置
        }
    },
    // 加了keep-alive之后出现的表示组件将会被缓存    
    // 有的时候会是原来的位置，有的时候又是直接在顶部，还是加一下为好
    activated() {
        this.$refs.scroll.scrollTo(0,this.saveY,300)
        this.$refs.scroll.refresh()
    },
    deactivated() {
        this.saveY=this.$refs.scroll.getScrollY()
        // console.log(this.saveY)

        // 离开的时候取消首页的图片加载监听
        this.$bus.$off('itemImageLoad',this.itemImgListener)
    },
    created() {
        // 1.请求轮播图等数据
        this._getMultiData()
        // 2.请求商品数据
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')
        // // 3.监听item中图片的加载   (在created里面去拿this.$refs可能拿不到)
        // this.$bus.$on('itemImageLoad',()=>{
        //     this.$refs.scroll.refresh()
        // })
    },
    mounted() {
        // 用了混入，去掉了
        // // 3.监听item中图片的加载   (在created里面去拿this.$refs可能拿不到)
        // const refresh=this.debounce(this.$refs.scroll.refresh,200)

        // // 对监听的事件进行保存
        // this.itemImgListener=()=>{
        //     refresh()
        // }
        // this.$bus.$on('itemImageLoad',this.itemImgListener)
        

        // 获取tabControl的offsetTop(组件没有offsetTop)
        // 所有组件都有一个属性$el,用于获取组件中的元素
        // this.tabOffsetTop=this.$refs.tabControl.$el.offsetTop    //一开始只有58因为图片海没有加载完毕
        // console.log(this.tabOffsetTop)
    },
    computed: {
        showGoods(){
            return this.goods[this.currentType].list
        }
    },
    methods: {
        // 防抖函数
        debounce(func,delay){
            let timer=null
            return function(...args){
                if(timer) clearTimeout(timer)
                timer=setTimeout(()=>{
                    func.apply(this,args)
                },delay)
            }
        },
        // 监听到底是点击了哪一个tabControl
        tabClick(index){
            switch(index){
                case 0:
                    this.currentType='pop'
                    break
                case 1:
                    this.currentType='new'
                    break
                case 2:
                    this.currentType='sell'
                    break
            }
            this.$refs.tabControl1.currentIndex=index
            this.$refs.tabControl2.currentIndex=index
        },
        // 请求轮播图等数据
        _getMultiData(){
            getMultiData().then(res=>{
                // console.log(res)
                this.banner=res.data.data.banner.list
                this.recommends=res.data.data.recommend.list
                console.log(this.banner)
                console.log(this.recommends)
            })
        },
        // 请求商品数据
        getHomeGoods(type){
            const page = this.goods[type].page + 1
            getHomeGoods(type,page).then(res=>{
                // console.log(res)
                this.goods[type].list.push(...res.data.data.list)
                this.goods[type].page+=1
                //上拉加载更多完成
                this.$refs.scroll.finishPullUp()
            })
        },
        // 滚动的距离，控制返回顶部按钮的显示与隐藏
        contentScroll(position){
            // console.log(position)
            if((-position.y)>BACKTOP_DISTANCE){this.isShowBackTop=true}
            else{this.isShowBackTop=false}

            //控制tabControl是否吸顶
            this.isTabFixed=(-position.y)>this.tabOffsetTop
        },
        // 上拉加载更多
        loadMore(){
            this.getHomeGoods(this.currentType)
        },
        //轮播图加载完毕
        swiperImageLoad(){
            this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
            // console.log(this.tabOffsetTop)
        }
    },
}
</script>
<style scoped>
#home{
    height: 100vh;
    position: relative;
}
.home-nav{
    background-color: var(--color-tint);
    color: #fff;

    /* position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9; */
}
/* 实现不了  */
/*.tab-control{
     
    position: sticky;
    top: 44px;
}*/
/* .content{
    height:calc(100% - 93px);
    overflow: hidden;
    margin-top: 44px;
} */
/* 另一种方式，用定位 */
.content{
    top: 44px;
    bottom: 49px;
    left: 0;right: 0;
    overflow: hidden;
    position: absolute;
}
/* 固定滚动导航 */
.tab-control{
    position: relative;
    z-index: 9;
}
</style>